import React, { Component } from 'react'

// ==================================================
// 部分组件

// TopBar : 交互窗口的顶部,一个关闭按钮
function TopBar(props) {
	return (
		<div className='top-bar'>
			<div className='close iconfont icon-baseline-close-px' onClick={props.close}></div>
		</div>
	)
}

// BottomBtns : 交互窗口的底部,一个執行函數的确定按钮,一个关闭的取消按钮
function BottomBtns(props) {
	return (
		<div className='bottom'>
			<div onClick={props.confrim}>确定</div>
			<div onClick={props.close}>取消</div>
		</div>
	)
}

// ==================================================

export default class Interaction extends Component {
	state = {
		show: false,
	}
	// 确定的函数
	confrim = () => {
		// console.log(this.props.executeFunc);
		this.props.executeFunc() // 执行确定的函数
		// 确定后是否要关闭窗口(默认关)
		const toClose = this.props.toClose === undefined || this.props.toClose
		if (toClose) {
			this.close()
		}
	}
	// 关闭当前弹出窗口
	close = () => {
		this.setState({ show: false }) // 关闭窗口
		this.props.closeEffect && this.props.closeEffect() // 关闭窗口的同时执行的函数(有就执行)
	}
	componentWillReceiveProps(nextProps) {
		this.setState({ show: nextProps.show })
	}
	render() {
		return (
			<div
				className='interaction'
				style={{ width: this.state.show ? null : '0', border: this.state.show ? null : 'none' }}
			>
				<TopBar close={this.close} />
				{this.props.children}
				<BottomBtns confrim={this.confrim} close={this.close} />
			</div>
		)
	}
}
